<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" th:href="@{/css/login.css}"/>
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
    .login-center-input img {
        width: 20px;
        height: 20px;
    }

    .login-center-input img:hover {
        cursor: pointer;
    }

    .img {
        position: absolute;
        right: 30px;
        width: 20px;
        height: 20px;
        margin-top: -112px;
        z-index: 999;
    }
</style>
<body>
<div id="particles-js">
    <div class="login">
        <form th:action="@{/login}" method="post">
            <div class="login-top">
                图书管理系统
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img th:src="@{/images/name.png}"/></div>
                <div class="login-center-input">
                    <input type="text" name="username" value="" required="required" placeholder="请输入您的用户账号"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户账号'"/>
                    <div class="login-center-input-text">用户账号</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img th:src="@{/images/password-login.png}"/></div>
                <div class="login-center-input">
                    <input type="password" name="password" id="password_input" value="" required="required"
                           placeholder="请输入您的密码" onfocus="this.placeholder=''"
                           onblur="this.placeholder='请输入您的密码'"/>
                    <div class="login-center-input-text">密码</div>

                    <div style="margin-top:15px;">
                        <a th:href="@{/register}">
                            <span style="color: red;font-size: 14px;">还没注册账号?</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="login-button"><input type="submit" value="登录"/></div>
            <div class="img">
                <img id="password_show" onclick="hideShowPsw()" th:src="@{/images/closeyes.png}"/>
            </div>
        </form>
    </div>
    <div class="sk-rotating-plane"></div>
</div>

</body>
<!-- scripts -->
<script th:src="@{/mb/js/jquery-1.8.3.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/js/particles.min.js}"></script>
<script th:src="@{/js/app.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script type="text/javascript">
    var demoImg = document.getElementById("password_show");
    var demoInput = document.getElementById("password_input");

    //隐藏text block，显示password block
    function hideShowPsw() {
        if (demoInput.type == "password") {
            demoInput.type = "text";
            password_show.src = "../images/openeyes.png";
        } else {
            demoInput.type = "password";
            password_show.src = "../images/closeyes.png";
        }
    }
</script>

</html>